<script setup>
import { onMounted, reactive, ref, toRefs, watchEffect } from "vue";
import { storeToRefs } from "pinia";
import { Drag, Drop } from "vue-easy-dnd";
import { elements } from "@/assets/data/element";
import iDraw from "idraw";
import { onSelect } from "./idrawEvent";
import painterStore from "@/store/painter";
const painterStorer = painterStore();
let { zIndex, painterLayout } = storeToRefs(painterStorer);

const app = ref(null);
let idraw;
onMounted(() => {
  const options = {
    ...painterLayout.value,
    devicePixelRatio: 1, // 设备像素比例
    maxRecords: 10, // 最大记录数 - 用于撤销/重写
    disableKeyboard: false, // false监听键盘操作
  };
  const config = {
    scrollWrapper: {
      use: false, // false-不使用画布滚动条
    },
  };
  idraw = new iDraw(app.value, options, config);
  idraw.on("screenSelectElement", onSelect);
});
const onDrop = (e) => {
  console.log("onDrop-新放置一个组件：", e);
  const { offsetX, offsetY } = e.native;
  const uuid = idraw.addElement({
    ...elements[e.data].data,
    x: offsetX,
    y: offsetY,
  });
  idraw.selectElement(uuid);
};
</script>

<template>
  <Drop @drop="onDrop">
    <div
      class="bg"
      ref="app"
      :style="{
        width: painterLayout.contextWidth + 'px',
        height: painterLayout.contextHeight + 'px',
      }"
    >
      <div class="zhezhao" :style="{ zIndex: zIndex }"></div>
    </div>
  </Drop>
</template>

<style lang="scss" scoped>
.bg {
  position: relative;
  border-right: 1px solid #aaaaaa40;
  border-bottom: 1px solid #aaaaaa40;
  background-image: linear-gradient(#aaaaaa40 1px, transparent 0),
    linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
    linear-gradient(#aaa 1px, transparent 0),
    linear-gradient(90deg, #aaa 1px, transparent 0);
  background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
}
.zhezhao {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.drop-allowed {
  background-color: rgba(218, 34, 34, 0.2);
}
.drop-in {
  background-color: rgba(24, 238, 16, 0.2);
}
</style>
